<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
    :root {
        font-size: 20px;
    }

    * {
        padding: 0;
        margin: 0;
    }

    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        background-color: #333366;

    }

    div {
        font-size: 5rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #0099CC;
    }

    div>span {
        position: relative;
        display: inline-block;

    }

    .color {
        animation-name: color;
        /* 动画时间 */
        animation-duration: 1s;
        /* 动画次数 */
        animation-iteration-count: 2;
        /* 动画方式 */
        animation-timing-function: linear;
        /* 来回切换 */
        animation-direction: alternate;
    }

    @keyframes color {
        50% {
            color: #CCFF99;
            transform: scale(2);
        }

        to {
            transform: scale(.5);
        }
    }
</style>

<body>
    <div>炫酷logo</div>
</body>
<script>
    //reduce方法的妙用
    let div = document.querySelector('div');
    let divContent = div.textContent;
    [...divContent].reduce(function (pre, value, index) {
        if (pre == index) div.innerHTML = '';
        let span = document.createElement('span');
        span.innerHTML = value;
        div.appendChild(span);
        span.addEventListener('mousemove', function () {
            this.classList.add('color');
        });
        span.addEventListener('animationend', function () {
            span.classList.remove('color');
        });
        // span.addEventListener('mouseout', function () {
        //     span.classList.remove('color');
        // });

    }, 0);
    //reduce 方法求最大值
    // let arr = [1, 5, 6, 7, 8, 5, 6, 7, 8,];
    // function max(array) {
    //     return array.reduce(function (pre, value) {
    //         return pre > value ? pre : value;
    //     }, 0);//第一次循环 1 前面的 pre 
    // }

    // console.log(max(arr));
    //reduc 商品求和
    // let goods = [
    //     { name: 'phone13', price: 15000 },
    //     { name: 'phone14', price: 18000 },
    //     { name: 'pMac', price: 15000 },
    //     { name: 'airPose', price: 15000 },
    //     { name: 'airPose', price: 15000 },
    //     { name: 'airPose', price: 15000 },
    // ];
    // function goodsMax(goods) {
    //     let totle = 0;
    //     goods.reduce(function (pre, value) {
    //         // console.log(pre, value);//当没用返回值   是pre为undefined 当第一次 是 pre={ name: 'phone13', price: 15000 },
    //         // console.log(value.price);
    //         totle += value.price;
    //     }, 0);
    //     return totle;
    // }
    // console.log(`总价为=${goodsMax(goods)}`);
    //reduc 数组去重 值类型去重
    // let arr = [1, 5, 6, 7, 8, 5, 6, 7, 8,];
    // function qc(arr, price) {
    //     return arr.reduce(function (arr, value) {
    //         arr.includes(value) ? '' : arr.push(value);
    //         return arr;
    //     }, []);
    // }
    // console.log(qc(arr));
    //reduce 引用类型去重
    let goods = [
        { name: 'phone13', price: 15000 },
        { name: 'phone14', price: 18000 },
        { name: 'pMac', price: 15000 },
        { name: 'airPose', price: 15000 },
        { name: 'airPose', price: 15000 },
        { name: 'airPose', price: 15000 },
    ];
    function qcobj(arr, price) {
        let temp = [];
        arr.reduce(function (arr, value) {
            if (arr.includes(value.name) === false) {
                arr.push(value.name);
                temp.push(value);
            }
            return arr;
        }, []);
        return temp;
    }
    console.log(qcobj(goods))
</script>

</html>